<template>
  <div class="contain">
    <div class="nav">
      详情信息
      <div class="f_btn" @click="$router.go(-1)">
        <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>
        <span>返回</span>
      </div>
    </div>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" class="tabs">
      <el-tab-pane label="框架合同信息" name="first">
        <div class="total">
          <div class="title">
            <div>框架合同信息</div>
            <div v-show="ms_roleName == 'ProjectClerk'">
              <span @click="flag = !flag">{{flag?'编辑':'取消'}}</span>
              <span @click="save">保存</span>
            </div>
          </div>
          <div class="tables">
            <table cellpadding="0" cellspacing="0" border="1">
              <tr>
                <td>框架合同编号</td>
                <td>
                  <el-input v-model="form.conOuterno" :disabled="flag"></el-input>
                </td>
                <td>内部合同编号</td>
                <td>
                  <el-input v-model="form.conInnerno" :disabled="flag"></el-input>
                </td>
              </tr>
              <tr>
                <td>合同类型</td>
                <td>
                  <el-input v-model="form.conType" :disabled="flag"></el-input>
                </td>
                <td>项目部</td>
                <td>
                  <el-select
                    style="width: 100%"
                    v-model="form.belongOrg"
                    :disabled="flag"
                    placeholder="请选择项目部"
                    clearable
                  >
                    <el-option
                      v-for="(item, index) in list1"
                      :key="index"
                      :value="item.orgId"
                      :label="item.orgName"
                    ></el-option>
                  </el-select>
                </td>
              </tr>
              <tr>
                <td>合同名称</td>
                <td>
                  <el-input v-model="form.conName" :disabled="flag"></el-input>
                </td>
                <td>甲方</td>
                <td>
                  <el-select
                    style="width: 100%"
                    v-model="form.conPartya"
                    :disabled="flag"
                    placeholder="请选择甲方"
                    clearable
                  >
                    <el-option
                      v-for="(item, index) in list2"
                      :key="index"
                      :value="item.orgId"
                      :label="item.orgName"
                    ></el-option>
                  </el-select>
                </td>
              </tr>
              <tr>
                <td>签订时间</td>
                <td>
                  <el-date-picker
                    v-model="form.signDate"
                    type="date"
                    placeholder="选择日期"
                    :disabled="flag"
                    clearable
                    value-format="timestamp"
                  ></el-date-picker>
                </td>
                <td>完工时间</td>
                <td>
                  <el-date-picker
                    v-model="form.finishDate"
                    type="date"
                    placeholder="选择日期"
                    :disabled="flag"
                    clearable
                    value-format="timestamp"
                  ></el-date-picker>
                </td>
              </tr>
              <tr>
                <td>乙方</td>
                <td>
                  <el-select
                    style="width: 100%"
                    v-model="form.conPartyb"
                    :disabled="flag"
                    placeholder="请选择乙方"
                    clearable
                  >
                    <el-option
                      v-for="(item, index) in list3"
                      :key="index"
                      :value="item.orgId"
                      :label="item.orgName"
                    ></el-option>
                  </el-select>
                </td>
                <td>合同金额(万元)</td>
                <td>
                  <el-input v-model="form.conMoney" :disabled="flag"></el-input>
                </td>
              </tr>
              <tr>
                <td style="height:50px">查看文件</td>
                <td style="height:50px">
                  <a
                    :href="LfileUrl"
                    :download="LfileName"
                    class="red"
                    style="margin-left:10px;width:230px;display:block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
                  >{{LfileName}}</a>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="单项合同列表" name="second">
        <div class="title">
          <div>单项合同列表</div>
          <div></div>
        </div>
        <div class="table">
          <el-table :data="info" tooltip-effect="dark" style border>
            <el-table-column label="单项合同编号" align="center" width="138" prop="conOuterno"></el-table-column>
            <el-table-column label="内部合同编号" align="center" width="138" prop="conInnerno"></el-table-column>
            <el-table-column label="合同名称" align="center" prop="conName"></el-table-column>
            <el-table-column label="合同金额(万元)" align="center" width="110" prop="conMoney"></el-table-column>
            <el-table-column label="签订时间" align="center" width="150" prop="signDate">
              <template slot-scope="scope">{{scope.row.signDate | timeFilter}}</template>
            </el-table-column>
            <el-table-column label="完工时间" align="center" width="150" prop="finishDate">
              <template slot-scope="scope">{{scope.row.finishDate | timeFilter}}</template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="120">
              <template slot-scope="scope">
                <a @click.prevent="detail1(scope.row)" class="choose">查看详情</a>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="component-paging" v-if="info.length > 0">
          <div class="table-bottom">
            <div class="bottom-left"></div>
            <div class="paging">
              <div class="paging-left">
                <p>
                  共
                  <span>{{Math.ceil(singlePage.singleRowCount/singlePage.singlePageSize)}}</span> 页/
                  <span>{{singlePage.singleRowCount}}</span> 条数据
                </p>
              </div>
              <el-pagination
                background
                @size-change="SizeChange($event,secondBtn,singlePage.singleCurrentPage,singlePage.singlePageSize)"
                @current-change="CurrentChange($event,secondBtn,singlePage.singleCurrentPage,singlePage.singlePageSize)"
                :current-page.sync="singlePage.singleCurrentPage"
                :page-sizes="[10, 20, 30]"
                :page-size.sync="singlePage.singlePageSize"
                layout="sizes, prev, pager, next, jumper"
                :total="singlePage.singleRowCount"
              ></el-pagination>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="分包合同列表" name="third">
        <div class="title">
          <div>分包合同列表</div>
          <div></div>
        </div>
        <div class="table">
          <el-table :data="infen" tooltip-effect="dark" style border>
            <el-table-column label="分包合同编号" align="center" width="138" prop="conOuterno"></el-table-column>
            <el-table-column label="内部合同编号" align="center" width="138" prop="conInnerno"></el-table-column>
            <el-table-column label="合同名称" align="center" prop="conName"></el-table-column>
            <el-table-column label="签订时间" align="center" width="138" prop="signDate">
              <template slot-scope="scope">{{scope.row.signDate | timeFilter}}</template>
            </el-table-column>
            <el-table-column label="完工时间" align="center" width="138" prop="finishDate">
              <template slot-scope="scope">{{scope.row.finishDate | timeFilter}}</template>
            </el-table-column>
            <el-table-column label="合同金额(万元)" align="center" width="138" prop="conMoney"></el-table-column>
            <el-table-column label="操作" align="center" width="138">
              <template slot-scope="scope">
                <a @click.prevent="detail2(scope.row)" class="choose">查看详情</a>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="component-paging" v-if="infen.length > 0">
          <div class="table-bottom">
            <div class="bottom-left"></div>
            <div class="paging">
              <div class="paging-left">
                <p>
                  共
                  <span>{{Math.ceil(subPage.subRowCount/subPage.subPageSize)}}</span> 页/
                  <span>{{subPage.subRowCount}}</span> 条数据
                </p>
              </div>
              <el-pagination
                background
                @size-change="SizeChange($event,thirdBtn,subPage.subCurrentPage,subPage.subPageSize)"
                @current-change="CurrentChange($event,thirdBtn,subPage.subCurrentPage,subPage.subPageSize)"
                :current-page.sync="subPage.subCurrentPage"
                :page-sizes="[10, 20, 30]"
                :page-size.sync="subPage.subPageSize"
                layout="sizes, prev, pager, next, jumper"
                :total="subPage.subRowCount"
              ></el-pagination>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="虚拟合同项目列表" name="fourth">
        <div class="title">
          <div>虚拟合同项目列表</div>
          <div></div>
          <!--<div style="border:1px solid #ccc;padding: 5px 10px;margin-top: 10px;cursor: pointer;" @click="frameId">+ 添加项目</div>-->
        </div>
        <div class="table">
          <el-table :data="infoxu" tooltip-effect="dark" style border>
            <el-table-column label="项目编号" align="center" prop="proNo"></el-table-column>
            <el-table-column label="项目名称" align="center" prop="proName"></el-table-column>
            <el-table-column label="签订时间" align="center" prop="sworkDate">
              <template slot-scope="scope">{{scope.row.sworkDate | timeFilter}}</template>
            </el-table-column>
            <el-table-column label="完工时间" align="center" prop="eworkDate">
              <template slot-scope="scope">{{scope.row.eworkDate | timeFilter}}</template>
            </el-table-column>
            <!--<el-table-column label="合同金额(万元)" align="center" prop="conMoney"></el-table-column>-->
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <a @click.prevent="detail3(scope.row)" class="choose">查看详情</a>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="component-paging" v-if="infoxu.length > 0">
          <div class="table-bottom">
            <div class="bottom-left"></div>
            <div class="paging">
              <div class="paging-left">
                <p>
                  共
                  <span>{{Math.ceil(framePage.frameRowCount/framePage.framePageSize)}}</span> 页/
                  <span>{{framePage.frameRowCount}}</span> 条数据
                </p>
              </div>
              <el-pagination
                background
                @size-change="SizeChange($event,fourthBtn,framePage.frameCurrentPage,framePage.framePageSize)"
                @current-change="CurrentChange($event,fourthBtn,framePage.frameCurrentPage,framePage.framePageSize)"
                :current-page.sync="framePage.frameCurrentPage"
                :page-sizes="[10, 20, 30]"
                :page-size.sync="framePage.framePageSize"
                layout="sizes, prev, pager, next, jumper"
                :total="framePage.frameRowCount"
              ></el-pagination>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "datailframe",
  data() {
    return {
      // 文件展示url
      LfileUrl: "",
      //文件名字
      LfileName: "",
      ms_roleName: localStorage.getItem("roleName"),
      checked: true,
      name: "",
      form: {},
      list: [],
      list1: [],
      list2: [],
      list3: [],
      flag: true, //是否可编辑
      activeName: "first",
      info: [],
      infen: [],
      infoxu: [],
      singlePage: {
        singleRowCount: 1,
        singleCurrentPage: 1,
        singlePageSize: 10
      },
      subPage: {
        subRowCount: 1,
        subCurrentPage: 1,
        subPageSize: 10
      },
      framePage: {
        frameRowCount: 1,
        frameCurrentPage: 1,
        framePageSize: 10
      },
      total: 0,
      frameCount: 0,
      singleCount: 0,
      subCount: 0,
      newArray:{}
    };
  },
  created() {
    console.log("route参数：", this.$route.query.row);
    // 获取挂靠单位
    this.getGua();
    // 获取框架合同信息
    this.getList();
    // 获取甲方列表
    this.getJia();
    // 获取项目部的列表
    this.getXmb();

  },
  methods: {
    // 获取项目部的列表
    getXmb() {
      let that = this,
        suCb = res => {
          console.log("获取所有项目部", res);
          that.list1 = res.data.data;
        },
        erCb = res => {
          console.log(res);
        },
        req = {
          url: "/api/web/sysOrg/selectProjectOrg",
          methods: "post",
          data: {},
          success: suCb,
          error: erCb
        };
      that.$https(req);
    },
    // 获取挂靠单位
    getGua() {
      let that = this,
        suCb = res => {
          this.list3 = res.data.data;
        },
        erCb = res => {
          console.log(res);
        },
        req = {
          url: "/api/web/proContract/getDependParty",
          methods: "post",
          data: {},
          success: suCb,
          error: erCb
        };
      that.$https(req);
    },
    // 获取甲方列表
    getJia() {
      let that = this,
        suCb = res => {
          console.log("甲方列表", res);
          this.list2 = res.data.data;
        },
        erCb = res => {
          console.log(res);
        },
        req = {
          url: "/api/web/proContract/getPartya",
          methods: "post",
          data: {},
          success: suCb,
          error: erCb
        };
      that.$https(req);
    },
    // 获取框架合同信息
    getList() {
      let that = this,
        params = {
          conId: that.$route.query.row
        },
        suCb = res => {
          console.log("获取框架合同信息", res);
          that.form = res.data.data.frame;
          that.LfileUrl = res.data.data.files.length>0 ? img_url + res.data.data.files[0].fileUrl : '';
          that.LfileName = res.data.data.files.length>0 ? res.data.data.files[0].fileName : "";
          if (that.form.conType == "1") {
            that.form.conType = "框架合同";
          }
        },
        erCb = res => {
          console.log(res);
        },
        req = {
          url: "/api/web/proContract/viewDetails",
          methods: "post",
          data: params,
          success: suCb,
          error: erCb
        };
      that.$https(req);
    },
    // 编辑保存
    save() {
      this.newArray = this.list3.find((item) => {
        if(item.orgName === this.form.conPartyb || item.orgId === this.form.conPartyb){
          return item
        }
      });
      console.log(this.newArray)
      let that = this,
        suCb = res => {
          console.log("保存结果", res);
          that.$msg("保存成功");
          that.flag = true;
          that.getList();
        },
        erCb = res => {
          console.log(res);
        },
        req = {
          url: "/api/web/proContract/updateContractDetail",
          methods: "post",
          data: {
            proContract: {
              conId: that.$route.query.row,
              conOuterno: that.form.conOuterno,
              conInnerno: that.form.conInnerno,
              conType: that.form.conType,
              conName: that.form.conName,
              conMoney: that.form.conMoney + "",
              conDroppoint: that.form.conDroppoint + "",
              conPartya: that.form.conPartya,
              conPartyb: that.newArray.orgId,
              signDate: that.form.signDate + "",
              finishDate: that.form.finishDate + "",
              belongOrg: that.form.belongOrg,
              dependParty: that.form.dependParty
            }
          },
          success: suCb,
          error: erCb
        };
      if (that.form.conType == "框架合同") {
        req.data.proContract.conType = "1";
      }
      console.log("保存参数：", req.data);
      if (!that.flag) {
        that.$https(req);
      } else {
        that.$erMsg("先编辑，再保存");
      }
    },
    //tab切换
    handleClick(tab, event) {
      switch (this.activeName) {
        case "first":
          this.getList();
          break;
        case "second":
          this.singlePage.singleCurrentPage = 1;
          this.singlePage.singlePageSize = 10;
          this.secondBtn();
          break;
        case "third":
          this.subPage.subCurrentPage = 1;
          this.subPage.subPageSize = 10;
          this.thirdBtn();
          break;
        case "fourth":
          this.framePage.frameCurrentPage = 1;
          this.framePage.framePageSize = 10;
          this.fourthBtn();
//          this.frameId();//根据框架合同id找到虚拟合同id
          break;
      }
    },
    // 单项合同查询
    secondBtn() {
      let that = this,
        suCb = res => {
          console.log("查询单项合同", res);
          that.info = that.deepClone(res.data.list);
          that.singlePage.singleRowCount = res.data.rowCount;
        },
        erCb = res => {
          console.log(res);
        },
        req = {
          url: "/api/web/proContract/getAllContract",
          methods: "post",
          data: {
            conPartya: "",
            parentId: that.$route.query.row,
            pageCurrent: that.singlePage.singleCurrentPage,
            pageSize: that.singlePage.singlePageSize,
            conType: ["3"]
          },
          success: suCb,
          error: erCb
        };
      that.$https(req);
    },
    // 分包合同查询
    thirdBtn() {
      let that = this,
        suCb = res => {
          console.log("查询分包合同", res);
          that.infen = that.deepClone(res.data.list);
          that.subPage.subRowCount = res.data.rowCount;
        },
        erCb = res => {
          console.log(res);
        },
        req = {
          url: "/api/web/proContract/getAllContract",
          methods: "post",
          data: {
            conPartya: "",
            parentId: that.$route.query.row,
            pageCurrent: that.subPage.subCurrentPage,
            pageSize: that.subPage.subPageSize,
            conType: ["5"]
          },
          success: suCb,
          error: erCb
        };
      that.$https(req);
    },
    // 虚拟合同项目列表
    fourthBtn() {
      let that = this,
        suCb = res => {
          console.log("虚拟合同项目列表", res);
          that.infoxu = that.deepClone(res.data.data.list);
          that.total = res.data.data.total;
        },
        erCb = res => {
          console.log(res);
        },
        req = {
          url: "/api/web/proProject/selectProProjectByConId",
          methods: "post",
          data: {
            pn: this.framePage.frameCurrentPage + "",
            psize: this.framePage.framePageSize + "",
            conType: "2",
            parentId: this.$route.query.row
          },
          success: suCb,
          error: erCb
        };
      that.$https(req);
    },
    //单项合同列表 查看详情
    detail1(row) {
      this.$router.push({
        name: "detailsingle",
        query: {
          row: row.conId,
          rows: row.parentId,
          conType:row.conType
        }
      });
    },
  // 分包合同列表 查看详情
    detail2(row) {
      this.$router.push({
        name: "detailsub",
        query: {
          row: row.conId,
          rows: row.parentId
        }
      });
    },
  // 虚拟合同项目列表 查看详情
    detail3(row) {
      this.$router.push({
        name: "detailpro",
        params: {
          info: row.proId,
          tabs: "first"
        }
      });
    },
    //根据框架合同Id查找虚拟合同Id
    frameId(){
      let that = this,
        suCb = res => {
          console.log(res.data.data.conId)
          console.log("查询虚拟合同id", res.data.data.virtualId);
          this.xuProjectLists(res.data.data.conId);
//          this.$router.push({name:'buildPro',params:{conId:res.data.data.conId,belongOrg:this.$route.params.belongOrg}})
        },
        erCb = res => {
          console.log(res);
        },
        req = {
          url: "/api/web/proContract/getVirtualIdbyConId",
          methods: "post",
          data: {
            conId:that.$route.query.row
          },
          success: suCb,
          error: erCb
        };
      that.$https(req);
    },
    //虚拟合同项目列表
    xuProjectLists(val){
      let suCb = res => {
          console.log(res.data.data)
        },
        req = {
          url: "/api/web/proContract/getProjectByvirtualNo",
          methods: "post",
          data: {conId:val},
          success: suCb
        };
      this.$https(req);
    }
  },
};
</script>
<style scoped>
a {
  cursor: pointer;
}
.contain {
  box-sizing: border-box;
  width: 1100px;
  border: 1px solid #e4e4e4;
  margin: 20px auto;
}
.tabs {
  width: 1060px;
  margin: 20px;
  box-sizing: border-box;
}
.nav {
  background: #f8f8f8;
  height: 50px;
  font-size: 14px;
  line-height: 50px;
  border-bottom: 1px solid #e4e4e4;
  text-align: left;
  padding-left: 20px;
  font-size: 14px;
  color: #666;
}
.title {
  background: #f8f8f8;
  height: 50px;
  padding: 0 20px;
  font-size: 14px;
  border: 1px solid #e4e4e4;
  border-bottom: none;
}
.title > div:first-of-type {
  float: left;
  color: #666;
  line-height: 50px;
}
.title > div:last-of-type {
  float: right;
}
.title > div:last-of-type span {
  display: inline-block;
  margin-left: 20px;
  padding: 5px 20px;
  margin-top: 10px;
  cursor: pointer;
  border-radius: 4px;
}
.title > div:last-of-type span:first-of-type {
  border: 1px solid #e4e4e4;
  color: #666;
  background: #fff;
}
.title > div:last-of-type span:last-of-type {
  border: 1px solid #1abc9c;
  color: #fff;
  background: #1abc9c;
}
.red {
  color: #48c9b0;
  font-size: 12px;
}
.tables table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 12px;
}
.tables table td:nth-of-type(2n) {
  text-align: left;
}
.tables table td:nth-of-type(2n + 1) {
  text-align: right;
  padding-right: 20px;
  width: 160px;
  background: #f9fafc;
}
.choose {
  color: #1abc9c;
  padding: 0 5px;
}
.component-paging .table-bottom {
  width: 100%;
}
/* 返回按钮 */

.f_btn {
  display: inline-block;
  float: right;
  width: 80px;
  height: 30px;
  border: 1px solid #ccc;
  line-height: 30px;
  text-align: center;
  margin-top: 7px;
  margin-right: 10px;
}
.f_btn:hover {
  cursor: pointer;
  background-color: #f3f3f3;
}
</style>
